<template>
  <div class="container">
    <a-card>
      <a-row style="margin-bottom: 16px">
        <a-col :span="16">
          <a-space>
            <a-button
              v-permission="authority.SYS_USER_ADD"
              type="primary"
              @click="add"
            >
              <template #icon>
                <icon-plus />
              </template>
              新建
            </a-button>
          </a-space>
        </a-col>
      </a-row>
      <a-table
        row-key="id"
        :loading="loading"
        :pagination="false"
        :data="renderData"
        :columns="columns"
        :bordered="{ wrapper: true, cell: true }"
      >
        <template #operations="{ record }">
          <a-button
            v-permission="authority.SYS_USER_EDIT"
            type="text"
            size="small"
            @click="edit(record)"
          >
            <template #icon>
              <icon-edit />
            </template>
            编辑
          </a-button>
          <a-popconfirm
            :content="`此操作将永久删除该机构(${record.name}), 是否继续?`"
            type="warning"
            @ok="del(record.id)"
          >
            <a-button
              v-permission="authority.SYS_USER_DEL"
              type="text"
              size="small"
              status="danger"
            >
              <template #icon>
                <icon-delete />
              </template>
              删除
            </a-button>
          </a-popconfirm>
        </template>
      </a-table>
    </a-card>
    <OrgForm
      v-model:visible="formDialogVisible"
      :form-data="formData"
      @refresh="refresh"
    />
  </div>
</template>

<script lang="ts" setup>
  import { computed, ref } from 'vue';
  import { Message } from '@arco-design/web-vue';
  import authority from '@/utils/authority';
  import { useRequest } from 'vue-request';
  import { deleteOrg, getOrgTree, ORG_TYPES } from '@/api/upms/org';
  import OrgForm from './components/org-form.vue';

  // 初始数据
  const generateModel = () => {
    return {
      id: '',
      username: '',
      phone: '',
      roleIds: [],
      orgId: '',
      lockFlag: '',
    };
  };

  const { data, loading, refresh } = useRequest(getOrgTree);

  const renderData = computed(() => data.value || []);

  const formData = ref(generateModel());

  // 弹出框标记
  const formDialogVisible = ref(false);

  const columns = [
    { title: 'ID', dataIndex: 'id' },
    { title: '机构名称', dataIndex: 'name' },
    { title: '机构编码', dataIndex: 'code' },
    {
      title: '机构类型',
      dataIndex: 'type',
      render: ({ record }: { record: any }) =>
        ORG_TYPES.find((scope) => scope.value === record.type)?.label,
    },
    { title: '电话', dataIndex: 'phone' },
    { title: '邮箱', dataIndex: 'email' },
    { title: '地址', dataIndex: 'address' },
    { title: '备注', dataIndex: 'remarks' },
    { title: '操作', slotName: 'operations' },
  ];

  const add = () => {
    formDialogVisible.value = true;
    formData.value = generateModel();
  };
  const edit = (e: any) => {
    formDialogVisible.value = true;
    formData.value = { ...e };
  };
  const del = async (id: string) => {
    await deleteOrg(id).then(() => {
      Message.success('删除成功');
      refresh();
    });
  };
</script>

<script lang="ts">
  export default {
    name: 'Org',
  };
</script>

<style scoped lang="less">
  .container {
    padding: 0px 10px 0px 10px;
  }
  :deep(.arco-table-th) {
    &:last-child {
      .arco-table-th-item-title {
        margin-left: 16px;
      }
    }
  }
</style>
